.filters{
	@extend %aside;
	width: $filter-width;
	border-right: 3px solid $gray-super-light;
	padding: 30px 5px 50px 5px;
	border-left: 12px solid $gray_form;
	.input-group.date{
		margin-left: 0 !important;
	}
	.bootstrap-select.btn-group,
	.dropdown.bootstrap-select	{
		width: 100% !important;   
	} 
	.input-group, .combo-box, .btn-input .dropdown-toggle{
		width: 100%;
	}
	.open > .dropdown-menu{
		width: 100%;    
	}
}
.filters{
	.checkbox-block h5{
		margin-bottom: 10px;
	}
	input.checkbox-filter{
		& ~ label{
			font-weight: normal;
			color: $gray_light;
			&:hover, &:focus{
				color: $gray-highlight-font;
			}
	  		.tick {
	  			left: -5px;
	  		}
		}
		&:checked ~ label{
			color: $gray_text;
		}
	}
}
.filters-container {
	h2{
		margin-bottom: 10px;
	}
	color: $gray_text;
	padding: 0 15px 20px 15px; 
	@extend %filter-indent;
}
.block-filter{
	h5{
		margin-bottom: 2px;
		label{
			margin-bottom: 0;
		}
	}
	margin-bottom: 15px;
	select{
		border-color: $gray_form;
		max-width: 90%;
		option{
			width: 200px;
		}
	}
	.form-group{
		margin-bottom: 5px;
		label{
			@include font(14px, 20px);
			margin: 0;
		}
		&:last-of-type{
			margin-bottom: 0;
		}
	}
    .with-extra-btn .dropdown-toggle {
        border-top-right-radius: 0px; 
        border-bottom-right-radius: 0px;
    }
}
.form-date{
	margin-bottom: 15px;
	max-width: 275px;
	.input-group.date{
		width: 100%;
		label{
			display: table-cell;
			vertical-align: middle;
			@include font(14px, 16px);
			width: 50px;
			font-weight: normal;
		}
	}
	&.input-group{
		max-width: none;
	}
	.form-control{
		cursor: pointer;
		border-right: none;
		border-color: $gray_form;
		border-bottom-left-radius: 4px;
		border-top-left-radius: 4px;
	}
}
.calendar{
	@include size(21px, 20px); 
	display: inline-block;
	background: url("#{$assetsPath}/img/calendar.png") no-repeat;
	@include image-2x("#{$assetsPath}/img/calendar2k.png", 21px, 20px);
}
.preset-filters-container{
	border-top: 3px solid $gray-super-light;
	padding: 30px 15px 20px 15px;
	@extend %filter-indent;	
	a, .export-queue{
		@extend h5;
		color: $blue;
		display: block;
	}
}
.filters{
	.help-block{
		margin-top: 10px;
	}
}
@media only screen and (max-width: 1300px){
	.foldback-button{
		display: block;
	}
	.fullscreen-hidden-filters{
		.filters{
			left: - $filter-width;
			overflow: visible;
			@include hidden-foldback-button();
			.foldback-button{
                right: - $width-foldback-button;
            }
		}
	}
}
@media (max-width: $screen-md-min){
	@include tight-filters-aside();
}
@media (max-width: $screen-sm-min){
	.filters{
		left: ((-$filter-width));
		@include hidden-foldback-button();
		overflow: visible;
	}
	.fullscreen-hidden-filters{
		.filters{
			margin-left: 0;
			@include absolute(0px, 0, 0, 0);
			width: 100%;
			overflow: auto;
			height: auto;
		   	@include visible-foldback-button();
		   	.foldback-button{
		   		right: 10px;
		   	}
	    	.filters-container, .preset-filters-container{
		   		display: block;
		   		width: 300px;
		   		margin: 0 auto;
		   		border-color: $gray_form;
		   		@include opacity(1);
		    	visibility: visible;
		    }
		}
		.export-types{
			display: none;
		}
	}
}